<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*在 HTML 中定义样式的方式有 3 种：通过<link/>元素包含外部样式表文件、使用<style/>元素
			    定义嵌入式样式，以及使用 style 特性定义针对特定元素的样式。“DOM2 级样式”模块围绕这 3 种应用
			    样式的机制提供了一套 API。*/
            //12.1.1 访问元素的样式
              //任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。
              //这个 style 对象包含着通过 HTML 的 style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。
              //对于使用短划线（分隔不同的词汇，例如 background-image）的 CSS 属性名，必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问。
                        <div id="app" class="upload" style="line-height:18px;text-align:center;"></div>
		              	function f(xx){
							console.log(xx);
						}
						function getEle(ele){
							return document.getElementById(ele);
						}
						f(getEle('app').style.lineHeight);//18px
		      //只要取得一个有效的 DOM 元素的引用，就可以随时使用 JavaScript 为其设置样式。
		                getEle('app').style.color = 'red';
		      //1.DOM样式属性和方法
		            //cssText 
		                f(getEle('app').style.cssText);//line-height:18px;text-align:center;
		                f(getEle('app').style.length);//3
		      //2.计算的样式
		            //"DOM2 级样式"增强了 document.defaultView，提供了getComputedStyle()方法
		            //getComputedStyle()方法可以获取外部样式表和嵌入样式表的样式
		            //getComputedStyle()方法接收两个参数：要取得计算样式的元素和一个伪元素字符串(例如：":after")
		            //getComputedStyle()方法返回一个 CSSStyleDeclaration 对象（与 style 属性的类型相同），其中包含当前元素的所有计算的样式。
		               #app{width:100px;}
		               <div id="app" class="upload" style="line-height:18px;text-align:center;"></div>
		               f(document.defaultView.getComputedStyle(getEle('app')).width);//100px 
		               
		            //IE 不支持 getComputedStyle()方法，但它有一种类似的概念。
		            //在 IE 中，每个具有 style 属性的元素还有一个 currentStyle 属性。
		               f(getEle('app').currentStyle.width);//IE 100px
		               
            
            //12.3.3 元素大小
               //1.偏移量
                  //包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。
                  //offsetHeight：元素在垂直方向上占用的空间大小。
                  //offsetWidth：元素在水平方向上占用的空间大小。
                  //offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
                  //offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
                  
               //2.客户区大小，指的是元素内容及其内边距所占据的空间大小。
                  //clientWidth 属性是元素内容区宽度加上左右内边距宽度。
                  //clientHeight 属性是元素内容区高度加上上下内边距高度。
                  
               //3.滚动大小
                  //scrollHeight：在没有滚动条的情况下，元素内容的总高度。
                  //scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
                  //scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
                  //scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
		</script>
	</body>
</html>
